<!--
 * @Author: Shber
 * @Date: 2024-07-03 14:48:33
 * @LastEditors: Shber
 * @LastEditTime: 2024-07-03 17:29:50
 * @Description: 
-->
<template>
  <view class="goods_item">
    <view class="item_content">
      <view class="item_left">
        <image class="item_pic" mode="aspectFill" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"></image>
        <view class="item_status"><text class="span">已下架</text></view>          
      </view>
      <view class="item_right ml_10">
        <view class="title_group">
          <text class="title">纯真爱恋 99枝郁金香郁鲜花 礼盒</text>
          <tm-icon color="#999999" :fontSize="24" name="tmicon-angle-right"></tm-icon> 
        </view>
        <view class="num_group mt_5"><text class="color_orange">¥321</text> <text class="color_gray ml_20">活动价：¥321</text></view>
      </view>
    </view>
    <view class="btn_group">
      <tm-button :shadow="0" class="btn" :transprent="true" size="small" outlined label="下架"></tm-button>
      <tm-button :shadow="0" class="btn" :transprent="true" size="small" outlined label="删除"></tm-button>
      <tm-button :shadow="0" class="btn" :transprent="true" size="small" outlined label="修改分类"></tm-button>
    </view>
  </view>
</template>
<script setup>
  import {ref, watch} from 'vue'
  const emits = defineEmits(['onSuccess'])
  const props = defineProps({
    data: {
      type: Array,
      default: ()=>[]
    }
  })
  
  const dataList = ref([])
  
  watch(() => props.data, (newVal) => {
    dataList.value = newVal
  },{ immediate: true })
</script>
<style lang="scss" scoped>
  .goods_item{padding-bottom: 15px; border-bottom: 1px solid #f8f8f9; margin-bottom: 15px;}
  .item_content{display: flex; }
  .item_left,.item_pic{width: 60px; height: 60px; position: relative;
    .item_status{  width: 60px; text-align: center; line-height: 18px; background-color: rgba($color: #000000, $alpha: 0.5); position: absolute; bottom: 0; 
      .span{font-size: 11px; color: #fff; line-height: 0;}
    }
  }
  .title_group{display: flex; justify-content: space-between; align-items: flex-start;}
  .title{font-size: 14px; line-height: 20px; color: #333;}
  .color_orange, .color_gray{font-size: 14px; color: #666666;}
  .color_orange{color: #FF7226;}
  .btn_group{display: flex; justify-content: flex-end;}
  .btn{margin: 10px 0 0 10px !important;}

</style>